<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NX audio player</title>
</head>

 <!--
  Все сделано упрощенно - без SWF Object и jQuery.
  параметр soundfile - url к mp3 (если не указан - загружается локальный "track.mp3")
  параметр duration (не обязателен) - длительность трека в мс.сек.
  параметр player_id (не обязателен) - номер плеера в группе
 -->

<body>

  <div class="players">

    <div class="player">
      <div class="title"><b>Player 1</b> &#47; <b>Track title:</b> track 1</div>
      <object id="player1-ie" name="player1-ie" width="500" height="40" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0">
        <param name="movie" value="nx_audio_player.swf" />
        <param name="flashvars" value="soundfile=track.mp3&duration=62000&player_id=1" />
        <embed id="player1" name="player1" width="500" height="40" src="nx_audio_player.swf" flashvars="soundfile=track.mp3&duration=62000&player_id=1" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="https://www.macromedia.com/go/getflashplayer"></embed>
      </object>
    </div>

    <div class="player">
      <div class="title"><b>Player 2</b> &#47; <b>Track title:</b> track 2</div>
      <object id="player2-ie" name="player2-ie" width="500" height="40" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0">
        <param name="movie" value="nx_audio_player.swf" />
        <param name="flashvars" value="soundfile=track-2.mp3&duration=73000&player_id=2" />
        <embed id="player2" name="player2" width="500" height="40" src="nx_audio_player.swf" flashvars="soundfile=track-2.mp3&duration=73000&player_id=2" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="https://www.macromedia.com/go/getflashplayer"></embed>
      </object>
    </div>

    <div class="player">
      <div class="title"><b>Player 3</b> &#47; <b>Track title:</b> track 3</div>
      <object id="player3-ie" name="player3-ie" width="500" height="40" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0">
        <param name="movie" value="nx_audio_player.swf" />
        <param name="flashvars" value="soundfile=track-3.mp3&duration=63000&player_id=3" />
        <embed id="player3" name="player3" width="500" height="40" src="nx_audio_player.swf" flashvars="soundfile=track-3.mp3&duration=63000&player_id=3" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="https://www.macromedia.com/go/getflashplayer"></embed>
      </object>
    </div>

  </div>


  <div class="remote_control-wrapper">
    <label>Remote control (JS):</label>
    <a href="#" id="link_p1_play">Play Player 1</a> | <a href="#" id="link_p1_stop">Stop Player 1</a> <br />
    <a href="#" id="link_p2_play">Play Player 2</a> | <a href="#" id="link_p2_stop">Stop Player 2</a> <br />
    <a href="#" id="link_p3_play">Play Player 3</a> | <a href="#" id="link_p3_stop">Stop Player 3</a> <br />
  </div>
  
  <div class="events-wrapper">
    <label>Events:</label><div id="events"></div>
  </div>


<style type="text/css">
   body {font-family: Arial; font-size: 12px}
   label {display: block; font-weight: bold}
  .players .player {margin: 10px 0}
  .players .player .title {margin-bottom: 2px; font-size: 11px}
  .remote_control-wrapper {margin: 10px 0}
  .events-wrapper {margin: 10px 0}
  .events-wrapper #events {height: 200px; width: 200px; overflow: scroll; border: 1px solid #aaa}
</style>

<script type="text/javascript">
<!--//--><![CDATA[//><!--

  var events = document.getElementById('events');
  var is_ie = navigator.appName.indexOf("Microsoft") != -1 ? true : false;
  var id_suffix = is_ie ? '-ie' : '';

  document.getElementById('link_p1_play').onclick = function(){document.getElementById('player1'+id_suffix).js_play(); return false;};
  document.getElementById('link_p1_stop').onclick = function(){document.getElementById('player1'+id_suffix).js_stop(); return false;};
  document.getElementById('link_p2_play').onclick = function(){document.getElementById('player2'+id_suffix).js_play(); return false;};
  document.getElementById('link_p2_stop').onclick = function(){document.getElementById('player2'+id_suffix).js_stop(); return false;};
  document.getElementById('link_p3_play').onclick = function(){document.getElementById('player3'+id_suffix).js_play(); return false;};
  document.getElementById('link_p3_stop').onclick = function(){document.getElementById('player3'+id_suffix).js_stop(); return false;};
  
  function js_on_end_track(player_id){
    events.innerHTML = 'player '+player_id+' was finished<br />'+events.innerHTML;
    if (player_id == 1) document.getElementById('player2'+id_suffix).js_play();
    if (player_id == 2) document.getElementById('player3'+id_suffix).js_play();
  }

  function js_on_play(player_id){
    for (var i = 1; i <= 3; i++) if (i != player_id) document.getElementById('player'+i+id_suffix).js_stop();
    events.innerHTML = 'player '+player_id+' was started<br />'+events.innerHTML;
  }

  function js_on_stop(player_id){
    events.innerHTML = 'player '+player_id+' was stopped<br />'+events.innerHTML;
  }

//--><!]]>
</script>

</body>
</html>